<template>
  <div class="box">
    <!-- 顶部 -->
    <header class="header">
      <ul>
        <li class="left">
          <van-icon name="arrow-left" @click="$router.back()" />
        </li>
        <li class="middle">
          <van-cell-group>
            <van-field
              v-model="keyword"
              placeholder="请输入关键字"
              left-icon="search"
              clearable
              @focus="showButton"
              @blur="hiddenButton"
            />
          </van-cell-group>
        </li>
        <li class="right">
          <van-button type="danger" v-show="show_flag" @click="continueSearch"
            >搜索</van-button
          >
        </li>
      </ul>
    </header>
    <div class="content">
      <van-sticky :offset-top="44">
        <!-- 下拉菜单 -->
        <div class="menu">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option" />
            <van-dropdown-item title="筛选" ref="item">
              <div class="price">
                <van-cell center>
                  <van-field v-model="minPrice" placeholder="最低价格" />
                </van-cell>
                <van-cell center title="—" />
                <van-cell center>
                  <van-field v-model="maxPrice" placeholder="最高价格" />
                </van-cell>
              </div>
              <div style="padding: 5px 16px">
                <van-button type="danger" block round @click="onConfirm">
                  确认
                </van-button>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
      </van-sticky>
      <!-- 商品列表 -->
      <van-card
        v-for="(item, index) in sortdata"
        :key="index"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryResult",
  data() {
    return {
      keyword: "",
      show_flag: false,
      minPrice: "",
      maxPrice: "",
      goodsList: [],
      originList: [],
      category: "",
      brand: "",
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "全部商品", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
    };
  },
  created() {
    
    this.category = this.$route.query.category;
    this.brand = this.$route.query.brand;
    this.$http({
      url: "pro/categorybrandprolist",
      params: {
        brand: this.brand,
        category: this.category,
        count: 1,
        limitNum: 20,
      },
    }).then((res) => {
      this.goodsList = res.data.data;
      this.originList = res.data.data;
    });
  },
  computed: {
    sortdata: {
      get() {
        if (this.value == "0") {
          return this.goodsList;
        }
        if (this.value == "1") {
          let arr = [...this.goodsList];
          arr.sort((a, b) => a.originprice - b.originprice);
          return arr;
        }
        if (this.value == "2") {
          let arr = [...this.goodsList];
          arr.sort((a, b) => b.originprice - a.originprice);
          return arr;
        }

        return this.goodsList;
      },
    },
  },
  methods: {
    continueSearch() {
      this.$http({
        url: "pro/search",
        params: {
          keyword: this.keyword,
          count: 1,
          limitNum: 20,
        },
      }).then((res) => {
        this.goodsList = res.data.data;
      });
    },
    onConfirm() {
      this.$refs.item.toggle();
      // 筛选
      this.goodsList = this.originList;
      if (this.minPrice || this.maxPrice) {
        let min = this.minPrice;
        let max = this.maxPrice;
        if (!min) min = 0;
        if (!max) max = 99999;
        let newarr = this.goodsList.filter(
          (item) => item.originprice >= min && item.originprice <= max
        );
        this.goodsList = newarr;
      }
    },
    showButton() {
      this.show_flag = true;
    },
    hiddenButton() {
      setTimeout(() => {
        this.show_flag = false;
      }, 10);
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1;
  overflow: auto;
  background: #efefef;
}
.header ul {
  display: flex;
  align-items: center;
  text-align: center;
  height: 44px;
}
.header ul .left {
  width: 40px;
  font-size: 24px;
}
.header ul .left i {
  display: block;
}
.header ul .middle {
  flex: 1;
}
.header ul .middle .van-cell {
  background-color: #efefef;
  border-radius: 16px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header ul .right {
  width: 60px;
  font-size: 12px;
}
.header ul .van-button {
  padding: 0 4px;
  height: 24px;
}
.header ul .right .van-button__content {
  font-size: 12px;
}

/* 菜单 */
.menu {
  overflow: hidden;
  text-align: center;
}
.menu .price {
  display: flex;
}
.van-dropdown-menu__bar {
  box-shadow: 0;
}
</style>